<template>
  <div id="home_footer">
    <UnitTitle title="图书列表"  :mores="false"/>
    <div class="book_list">
      <book-item v-for="item in bookListAll" :key="item.id" :book-obj="item"></book-item>
    </div>

<!--    使用分页-->
    <el-pagination
        class="pagination"
        layout="prev, pager, next"
        :total="bookListAll.length"
        :current-page="currentPageNumber"
        @current-change="currentChange">
    </el-pagination>

    <div class="home_footer">
      | 版本所有权：王璐佳 |
    </div>
  </div>


</template>

<script>
import UnitTitle from "./UnitTitle";
import {getAllBook,getAllBookByLimit} from "../../network/homeRequest";
import BookItem from "./BookItem";
export default {
  name: "HomeFooter",
  components: {
    BookItem,
    UnitTitle,
  },
  data(){
    return{
      bookList:[],
      bookListAll:[],
      currentPageNumber:8,
    }
  },
  created() {
    getAllBook().then((result)=>{
      console.log(result);
      this.bookListAll=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    })
    this.currentChange(1);
  },
  methods:{
    currentChange(size){
      if (size!==this.currentPageNumber){
        this.currentPageNumber=size;
        getAllBookByLimit(this.currentPageNumber,8).then((result)=>{
          console.log(result);
          this.bookList=result.data.data.records;
        }).catch((reason)=>{
          console.log(reason);
        })
      }
    }
  }
}
</script>

<style scoped>
#home_footer{
  margin-top: 20px;
}
.book_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}
.pagination{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.home_footer{
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  background: #eee;
}
</style>
